<template>
    <page-header-wrapper :title="false">
      <a-card
        title="组员微信管理"
      >
        <template slot="extra">
          <a-button size="small" type="primary" @click="state">统计</a-button>
        </template>
<!--        <div class="table-page-search-wrapper">-->
<!--          <a-form-model :model="queryParam" layout="inline">-->
<!--            <a-row :gutter="20">-->
<!--              <a-col :md="6" :sm="24">-->
<!--                <a-form-model-item label="顾问姓名">-->
<!--                  <a-select-->
<!--                    v-model="queryParam['filter[uid]']"-->
<!--                    placeholder="选择要查询的顾问"-->
<!--                  >-->
<!--                    <a-select-option v-for="(item,index) in memberList" :key="index" :value="index">{{item}}</a-select-option>-->
<!--                  </a-select>-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
<!--              <a-col :md="6" :sm="24">-->
<!--                <a-form-model-item label="微信ID">-->
<!--                  <a-input v-model="queryParam['filter[wx_account]']" placeholder="输入微信ID"/>-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
<!--              <template v-if="advanced">-->
<!--                <a-col :md="6" :sm="24">-->
<!--                  <a-form-model-item label="添加日期">-->
<!--                    <a-range-picker @change="onChange" />-->
<!--                  </a-form-model-item>-->
<!--                </a-col>-->
<!--              </template>-->
<!--              <a-col :md="6" :sm="24">-->
<!--                <a-form-model-item label="添加日期">-->
<!--                  <a-range-picker @change="onChange" />-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
<!--              <a-col :md="6" :sm="24">-->
<!--                <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">-->
<!--                  <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>-->
<!--                  <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>-->
<!--                  <a @click="toggleAdvanced" style="margin-left: 8px">-->
<!--                    {{ advanced ? '收起' : '展开' }}-->
<!--                    <a-icon :type="advanced ? 'up' : 'down'"/>-->
<!--                  </a>-->
<!--                </span>-->
<!--              </a-col>-->
<!--            </a-row>-->
<!--          </a-form-model>-->
<!--        </div>-->
        <div class="wechat_content">
          <s-table
            bordered
            ref="table"
            :row-key="(record) => record.id"
            :columns="wxColumns"
            :data="wxData"
          >
            <div
              slot="filterDropdown"
              slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
              style="padding: 8px"
            >
              <a-input
                v-ant-ref="c => (searchInput = c)"
                :placeholder="`搜索${column.title}`"
                :value="selectedKeys[0]"
                style="width: 188px; margin-bottom: 8px; display: block;"
                @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
              />
              <a-button
                type="primary"
                icon="search"
                size="small"
                style="width: 90px; margin-right: 8px"
                @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
              >
                搜索
              </a-button>
              <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
                重置
              </a-button>
            </div>
            <div
              slot="filterRange"
              slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
              style="padding: 8px"
            >
              <a-range-picker
                style="width: 228px; margin-bottom: 8px; display: block;"
                :value="createValue"
                @change="onChange"
              />
              <a-button
                type="primary"
                icon="search"
                size="small"
                style="width: 110px; margin-right: 8px"
                @click="() => handleRange(selectedKeys, confirm, column.dataIndex)"
              >
                搜索
              </a-button>
              <a-button size="small" style="width: 110px" @click="() => rangeReset(clearFilters)">
                重置
              </a-button>
            </div>
            <div
              slot="filterSelect"
              slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
              style="padding: 8px"
            >
              <a-select
                show-search
                :placeholder="`选择${column.title}`"
                style="width: 188px; margin-bottom: 8px; display: block;"
                :value="selectedKeys[0]"
                :filter-option="filterOption"
                @change="(value) => setSelectedKeys(value ? [value] : [])"
                @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
              >
                <a-select-option v-for="(item,index) in memberList" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
              <a-button
                type="primary"
                icon="search"
                size="small"
                style="width: 90px; margin-right: 8px"
                @click="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
              >
                搜索
              </a-button>
              <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
                重置
              </a-button>
            </div>
            <template slot='group_type' slot-scope='text'>
              {{text === 'pt' ? '专利' : text === 'sh' ? '售后' : '商标'}}
            </template>
            <template slot="wx_index" slot-scope="text, record, index">
              {{index + 1}}
            </template>
            <template slot="image2" slot-scope="text, record">
              <a @click="handlePreview(record.image2)">
                <img :src="record.image2" width="30" height="30" />
              </a>
            </template>
            <template slot="image" slot-scope="text, record">
              <a @click="handlePreview(record.image)">
                <img :src="record.image" width="30" height="30" />
              </a>
            </template>
            <template slot="sign" slot-scope="text, record">
              <div v-if="record.v_id != ''">
                <div v-if="record.yc_sign == 1">
                  <a-rate :value="1" :count="1" :style="{ color: '#f00' }" @change="signWx(record.id)">
                    <a-icon slot="character" type="exclamation-circle" />
                  </a-rate>
                </div>
                <div v-else>
                  <a-rate :value="0" :count="1" :style="{ color: '#f00' }" @change="signWx(record.id)">
                    <a-icon slot="character" type="exclamation-circle" />
                  </a-rate>
                </div>
              </div>
              <div v-else>
                <a-rate :value="0" :count="1" :style="{ color: '#ff0000' }" @change="signWx(record.id)">
                  <a-icon slot="character" type="exclamation-circle" />
                </a-rate>
              </div>
            </template>
            <template slot="action" slot-scope="text,record">
              <a-button size="small" type="primary" @click="onSign(record.id)">操作</a-button>
            </template>
          </s-table>
        </div>
      </a-card>
      <a-modal
        title="评价微信"
        v-model="visible"
        @ok="onSubmitExtend"
        @cancel="onCancel"
      >
        <a-textarea v-model="info['info[remark]']" :rows="4"></a-textarea>
      </a-modal>
      <a-modal v-model="previewVisible" :footer="null" @cancel="handleCancel0">
        <img alt="example" style="width: 100%" :src="previewImage" />
      </a-modal>
      <a-modal
        title="微信添加统计"
        v-model="stateVisible"
      >
        <a-tabs v-model="activeKey" @change="onTabs">
          <a-tab-pane key="1" tab="今日"></a-tab-pane>
          <a-tab-pane key="2" tab="昨日"></a-tab-pane>
        </a-tabs>
        <s-table
          bordered
          ref="t"
          size="small"
          :row-key="(record) => record.uid"
          :columns="stateColumns"
          :data="stateData"
        >
          <template slot="num" slot-scope="text">
            <a-tag color="red">{{text}}</a-tag>
          </template>
        </s-table>
      </a-modal>
      <a-modal
        title="微信记录"
        v-model="visible"
        :footer="null"
      >
        <a-form-model
          ref="form"
          :model="signForm"
          :rules="signRules"
        >
          <a-form-model-item label="问题" prop="question">
            <a-input type="text" v-model="signForm.question" placeholder="输入问题是什么" />
          </a-form-model-item>
          <a-form-model-item label="解决方案" prop="proposal">
            <a-textarea :rows="5" v-model="signForm.proposal" placeholder="给出解决方案及建议"></a-textarea>
          </a-form-model-item>
          <a-form-model-item>
            <div :style="{ textAlign: 'right' }">
              <a-button type="danger" style="margin-right:10px" @click="signGood">优秀</a-button>
              <a-button type="primary" @click="onSubmit">提交</a-button>
            </div>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
    </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import { getMemberWechatList, getRemarkWx, getSignWx, getWechat, postRemarkWx, postSignWx, getExtend, signBad } from '@/api/wechat'
  import wechatColumns from '@/columns/wechat'
  const wxColumns = wechatColumns.list

  export default {
    components: {
      STable
    },
    name: 'Wechat',
    data () {
      return {
        wxColumns,
        wxData: parameters => {
          return getMemberWechatList(Object.assign(parameters, this.queryParam)).then(res => {
            this.memberList = res.result.advisers
            return res.result
          })
        },
        memberList: {},
        queryParam: {},
        currentId: '',
        info: {},
        advanced: false,
        visible: false,
        previewVisible: false,
        previewImage: '',
        stateColumns: [
          {
            title: '组长姓名',
            dataIndex: 'leader_name'
          },
          {
            title: '顾问姓名',
            dataIndex: 'adviser_name'
          },
          {
            title: '添加数量',
            dataIndex: 'num',
            scopedSlots: { customRender: 'num' }
          }
        ],
        stateData: parameters => {
          return getWechat(Object.assign(parameters, this.queryParam2)).then(res => {
            return res.result
          })
        },
        signForm: {
          question: '',
          proposal: ''
        },
        signRules: {
          question: [{ required: true, message: '请输入问题是什么', trigger: true }],
          proposal: [{ required: true, message: '请输入解决方案', trigger: true }]
        },
        stateVisible: false,
        activeKey: '1',
        queryParam2: {},
        createValue: []
      }
    },
    methods: {
       onChange (date, dateString) {
         this.createValue = date
         this.queryParam['filter[begin_created_at]'] = dateString[0]
         this.queryParam['filter[end_created_at]'] = dateString[1]
       },
       state () {
         this.activeKey = '1'
         this.queryParam2['filter[type]'] = '1'
         this.stateVisible = true
         this.$refs.t.refresh(true)
       },
       toggleAdvanced () {
         this.advanced = !this.advanced
       },
       handleChange (value) {
         this.queryParam['filter[add_time]'] = value
       },
       signWx (id) {
         const app = this
         getSignWx(id).then(res => {
           const result = res.result.data
           if (result.yc_sign === 0 || !result.yc_sign) {
             app.$confirm({
               title: '是否标记为异常',
               onOk: () => {
                 const d = {}
                 d['info[yc_sign]'] = 1
                 postSignWx(id, d).then(res => {
                   const data = res
                   if (data.status === 0) {
                     app.$refs.table.refresh(true)
                   }
                 })
               }
             })
           } else {
             app.$confirm({
               title: '是否取消异常标记',
               onOk: () => {
                 const d = {}
                 d['info[yc_sign]'] = 0
                 postSignWx(id, d).then(res => {
                   if (res.status === 0) {
                     app.$refs.table.refresh(true)
                   }
                 })
               }
             })
           }
         })
       },
       async handlePreview (file) {
         const app = this
         app.previewImage = file
         app.previewVisible = true
       },
       handleCancel0 ({ fileList }) {
         this.fileList = fileList
       },
       onCancel () {
         this.info = {}
       },
       handleSearch (selectedKeys, confirm, dataIndex) {
         confirm()
         this.searchText = selectedKeys[0]
         this.searchedColumn = dataIndex
         this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
       },
       handleReset (clearFilters, dataIndex) {
         clearFilters()
         delete this.queryParam['filter[' + dataIndex + ']']
       },
      handleRange (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.$refs.table.refresh(true)
      },
      rangeReset (clearFilters) {
        clearFilters()
        this.createValue = []
        delete this.queryParam['filter[begin_created_at]']
        delete this.queryParam['filter[end_created_at]']
        this.$refs.table.refresh(true)
      },
      handleSelect (selectedKeys, confirm, dataIndex) {
        confirm()
        this.searchText = selectedKeys[0]
        this.searchedColumn = dataIndex
        this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
      },
      filterOption (input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        )
      },
       addModal (id) {
         const app = this
         app.currentId = id
         getRemarkWx(id).then(res => {
           if (res.status === 0) {
             this.info['info[remark]'] = res.result.data.remark
             this.visible = true
           } else {
             this.$warning({
               title: res.msg
             })
           }
         })
       },
       onSubmitExtend (id) {
         const app = this
         if (app.info['info[remark]'] === '') {
           app.$warning({
             title: '备注内容不能为空'
           })
           return false
         }
         postRemarkWx(app.currentId, app.info).then(res => {
           if (res.status === 0) {
             app.$refs.table.refresh(true)
             app.visible = false
           } else {
             app.$warning({
               title: res.msg
             })
           }
         })
       },
       onTabs (key) {
         this.activeKey = key
         this.queryParam2['filter[type]'] = key
         this.$refs.t.refresh(true)
       },
      onSign (id) {
        const app = this
        app.currentId = id
        getExtend(app.currentId).then(res => {
          app.signForm.question = res.result.question
          app.signForm.proposal = res.result.proposal
          app.visible = true
        })
      },
      onSubmit () {
        const app = this
        app.$refs.form.validate(valid => {
          if (valid) {
            const form = {}
            for (const k in app.signForm) {
              form['info[' + k + ']'] = app.signForm[k]
            }
            signBad(app.currentId, 'wt', form).then(res => {
              if (res.status === 0) {
                app.visible = false
                app.$refs.table.refresh()
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          } else {
            return false
          }
        })
      },
      signGood () {
        const app = this
        this.$confirm({
          title: '是否确认此条设为优秀微信',
          onOk: () => {
            signBad(app.currentId, 'yx').then(res => {
              if (res.status === 0) {
                app.visible = false
                app.$refs.table.refresh()
              } else {
                app.$warning({
                  title: res.msg
                })
              }
            })
          }
        })
      }
     }
  }
</script>

<style>
.ant-table-tbody > tr.table-color-dust {
  background-color: #ffcccc;
}
</style>
